<template>
  <!-- 左侧框 -->
  <div class="left-container">
    <!-- 标题部分 -->
    <div class="choose-header">
      <el-input
        v-model="search"
        placeholder="请输入"
        prefix-icon="el-icon-search"
        clearable
        @keyup.enter.native="handleSarch"
        @clear="handleSarch"
      />
    </div>
    <!-- 树形结构 -->
    <div class="tree-container">
      <div v-for="(item, index) in showTree" :key="index">
        <div class="tree-box">
          <!-- 树形标题 -->
          <div class="title" @click="item.showchild = !item.showchild">
            <i :class="item.showchild ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" />
            <span>{{ item.groupName }}</span>
          </div>
          <!-- 群组部分 -->
          <el-checkbox-group
            v-show="item.showchild"
            v-model="checkList"
            class="group"
            @change="emitSel($event, item, index)"
          >
            <el-checkbox v-for="(i, l) in item.children" :key="l" :label="i" class="node">
              <div class="con">
                <span style="white-space: initial;">{{ i.sendIp }}({{ i.dataSourceNames }})</span>
                <span>{{ i.num }}</span>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogsList } from '@/api/milkyway/unparsedLogs.js'
import { deepClone } from '@/utils'

export default {
  data() {
    return {
      search: '',
      checkList: [],
      tree: [],
      showTree: []
    }
  },
  created() {
    this.getLeftFilter()
  },
  methods: {
    getLeftFilter() {
      this.tree = [{
        groupName: '发送端名称',
        children: [],
        showchild: true
      }]
      getLogsList().then(res => {
        this.tree[0].children = res
        this.showTree = this.tree
      })
    },
    /** 重组数据-----*/
    resetData(result) {
      const newData = []
      return new Promise((resolve) => {
        result.forEach((i, index) => {
          newData.push(Object.assign({ showchild: true }, { ...i }))
        })
        resolve(newData)
      })
    },
    emitSel(e, parent, index) {
      const checkIpList = this.checkList.map(i => {
        return i.sendIp
      })
      this.$emit('emitSel', checkIpList)
    },
    handleReset() {
      this.checkList = []
      this.$emit('emitSel', [])
    },
    handleSarch() {
      const newArr = []
      if (this.tree.length > 0) {
        this.tree.forEach((i, index) => {
          newArr.push({
            groupName: i.groupName,
            showchild: i.showchild,
            children: []
          })
          if (i.children.length > 0) {
            this.handleFilter(i.children, newArr[index])
          }
        })
      }
      this.showTree = newArr
    },
    handleFilter(arr, newArr, type) {
      const filterArr = arr.filter((item) => {
        return item.dataSourceNames.includes(this.search) || item.sendIp.includes(this.search)
      })
      console.log(filterArr, '>>> filterArr')
      if (filterArr.length > 0) {
        filterArr.forEach(i => {
          newArr.children.push({
            dataSourceNames: i.dataSourceNames,
            num: i.num,
            sendIp: i.sendIp
          })
        })
      }
      console.log(newArr, '>>> newArr')
      return newArr
    }
  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme .title {
  color: #fff !important;
}

.left-container {
  padding: 15px 0 0 3px;
  border-top: none !important;
  // 标题样式
  .choose-header {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;

    .title {
      font-size: 16px;
      color: #303032;
      line-height: 24px;
      font-weight: 700;
      text-align: left;
      margin: 0 0 0 10px;
    }

    // 清空内容
    .reset {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
      cursor: pointer;
    }
  }

  //   树形结构
  .tree-container {
    padding: 10px;
    width: 100%;
    flex: 1;
    overflow: auto;
    font-size: 14px;
    // 下面盒子
    .tree-box {
      padding: 0 0 0 0;
      //   标题部分
      .title {
        padding: 10px;
        background: #f8f8f8;
        // margin-bottom: 10px;
        i {
          margin-right: 10px;
        }
      }

      //   复选框群部分
      .group {
        padding-left: 15px;
        padding-top: 10px;
        // 单个节点
        .node {
          width: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 10px 0;
          //   文字部分
          .con {
            width: 159px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #303032;
          }
        }
      }
    }
  }
}
</style>
